.page-title {
	height: rem(92);
	background-color: #63b900;
	padding: 0 rem(32);
	position: relative;

	h2 {
		color: $white;
		font-size: rem(46);
	}

	& > a {
		color: $white;
		font-size: rem(36);
		position: absolute;
		left: rem(30);

		i {
			font-size: rem(32);
			margin-right: rem(10);
		}
	}
}

.product-search {
	width: 100%;
	padding: rem(30) rem(36);
	position:fixed;
	top: 0;
	left: 0;
	background-color: $white;
	z-index: 9999;

	&-form {
		height: rem(72);
		border-radius: rem(36);
		background-color: #f4f4f4;
		overflow: hidden;

		input {
			background: none;
			font-size: rem(26);
			color: $gray9;
			height: 100%;
			text-indent: rem(30);

			&:focus {
				color: $gray3;
			}
		}

		button {
			height: rem(60);
			width: rem(110);
			background-color: #63b900;
			font-size: rem(26);
			color: $white;
			border-radius: rem(30);
			margin: 0 rem(9);
		}
	}

	& > a {
		color: $gray3;
		margin-left: rem(30);

		i {
			display: flex;
			font-size: rem(40);
		}

		&.hide {
			display: none;
		}
	}
}

.product {
	&-left {
		width: rem(190);
		position:fixed;
		top: rem(130);
		left: 0;
		z-index: 9998;

		p {
			a {
				display: block;
				height: rem(96);
				line-height: rem(96);
				color: $gray9;
				background-color: $white;
				text-align: center;
				font-size: rem(26);
				overflow: hidden;

				&.focus {
					background-color: #f5f5f5;
					font-size: rem(32);
					color: $gray3;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: rem(8);
						height: rem(30);
						background-color: #5bb300;
					}
				}
			}
		}
	}

	&-right {
		margin-left: rem(190);
		margin-top: rem(132);
		background-color: #f5f5f5;
		padding: rem(24);

		.product-right-box {
			background-color: $white;
			margin-bottom:rem(24);
			h2 {
				height: rem(96);
				font-size: rem(28);
				color: $gray3;
				padding: 0 rem(25);

				&::after {
					content: '';
					display: flex;
					width: rem(18);
					height: rem(4);
					border-radius: 2px;
					background-color: #5bb300;
					margin-left: rem(15);
				}
			}

			.brands {
				padding: rem(0) rem(12) rem(10);

				li {
					width: (100%/3);
					padding: rem(10) rem(12);

					img {
						max-height: rem(84);
					}
				}
			}

			.hot-product {
				padding: rem(0) rem(12) rem(10);

				li {
					width: (100%/3);
					padding: rem(0) rem(12);

					.image {
						padding-bottom: 100%;
						height: 0;
						overflow: hidden;
						position: relative;

						a {
							img {
								@extend %middle;
							}
						}
					}

					&>p {
						background-color: #5bb300;
						height: rem(36);
						line-height: rem(36);
						font-size: rem(24);
						text-align: center;
						overflow: hidden;
						border-radius: rem(18);
						margin-top: rem(10);

						a {
							color: $white;
						}
					}
				}
			}

			.products-List {
				padding: rem(0) rem(12) rem(10);

				li {
					width: (100%/3);
					padding: rem(0) rem(12) rem(20);

					.image {
						padding-bottom: 100%;
						height: 0;
						overflow: hidden;
						position: relative;

						a {
							img {
								@extend %middle;
							}
						}
					}

					&>p {
						height: rem(22);
						font-size: rem(22);
						text-align: center;
						overflow: hidden;
						margin-top: rem(18);

						a {
							color: $gray3;

							&:active {
								color: #5bb300;
							}
						}
					}

					b {
						display: block;
						text-align: center;
						font-size: rem(26);
						margin-top: rem(16);
						color: #f14d4d;
						font-weight: 400;
					}
					&.pad{
						padding:0;
					}
				}
			}
		}
		.more {
			padding: rem(20);
			font-size: rem(26);
			color: $gray9;

			i {
				font-size: rem(26);
				display: flex;
				margin-left: rem(10);
			}
		}
	}
}

.products-list {
	padding: 0 rem(24);

	li {
		padding: rem(24) 0;
		overflow: hidden;

		.image {
			width: rem(280);
			height: rem(280);
			float: left;
			position: relative;
			margin-right: rem(24);

			img {
				@extend %middle;
			}
		}

		p {
			font-size: rem(32);
			line-height: rem(50);
			max-height: rem(100);
			margin-top: rem(10);
			overflow: hidden;

			a {
				color: $gray3;
			}
		}

		span {
			display: block;
			font-size: rem(24);
			margin-top: rem(26);

			a {
				color: $gray9;
			}
		}

		.price {
			font-size: rem(24);
			height: rem(38);
			color: $gray9;
			margin: rem(16) 0;
			overflow: hidden;

			b {
				font-size: rem(20);
				color: #ec2e0b;
				margin-right: rem(20);
				display: flex;

				strong {
					font-size: rem(38);
				}
			}
		}

		.menber {
			height: rem(30);
			font-size: rem(20);

			mark {
				background-color: #63b900;
				border: 1px solid #63b900;
				color: $white;
				padding: 0 rem(10);
				line-height: rem(30);
				display: inline-block;
				vertical-align: top;
				border-radius: rem(5);
				margin-right: rem(10);

				&:last-child {
					background-color: white;
					border: 1px solid #ff6600;
					color: #ff6600;
				}
			}
		}

		a {
			&:active {
				color: #63b900;
			}
		}
	}
}

.hide {
	display: none;
}

.products-grid {
	padding: rem(14) rem(12);
	background-color: #f4f4f4;
	overflow: hidden;

	li {
		padding: rem(10) 0;
		width: (100%/2);
		float: left;

		.item {
			background-color: $white;
			margin: rem(10);
			padding-bottom: rem(26);

			.image {
				padding-bottom: 100%;
				height: 0;
				overflow: hidden;

				a {
					display: block;
					width: 100%;
					height: 100%;
					position: relative;

					img {
						max-height: none;
					}
				}
			}

			p {
				font-size: rem(28);
				line-height: rem(46);
				height: rem(46);
				margin: rem(16) rem(20) 0;
				overflow: hidden;

				a {
					color: $gray3;
				}
			}

			span {
				display: block;
				font-size: rem(24);
				height: rem(24);
				overflow: hidden;
				margin: rem(26) rem(20) 0;

				a {
					color: $gray9;
				}
			}

			.price {
				font-size: rem(24);
				height: rem(38);
				color: $gray9;
				margin: rem(16) rem(20);
				overflow: hidden;

				b {
					font-size: rem(20);
					color: #ec2e0b;
					margin-right: rem(20);
					display: flex;

					strong {
						font-size: rem(38);
					}
				}
			}

			.menber {
				height: rem(30);
				font-size: rem(20);
				margin: rem(0) rem(20);

				mark {
					background-color: #63b900;
					border: 1px solid #63b900;
					color: $white;
					padding: 0 rem(10);
					line-height: rem(30);
					display: inline-block;
					vertical-align: top;
					border-radius: rem(5);
					margin-right: rem(10);

					&:last-child {
						background-color: white;
						border: 1px solid #ff6600;
						color: #ff6600;
					}
				}
			}

			a {
				&:active {
					color: #63b900;
				}
			}
		}
	}
}

.screen-box {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
	display: none;

	&-item {
		height: 100%;
		background-color: $white;
		margin-left: rem(220);
		position: relative;
		overflow-y: auto;

		span {
			display: block;
			font-size: rem(26);
			color: $gray6;
			line-height: rem(70);
			text-indent: rem(24);
			padding-top: rem(50);
			background-color: #fafafa;
		}

		p {
			padding: 0 rem(26);
			font-size: rem(28);
			height: rem(40);
			margin-top: rem(20);

			i {
				font-size: rem(22);
				color: $gray6;
				@include transition();
				@include transform(0);
			}

			&.up {
				i {
					@include transition();
					@include transform(180deg);
				}
			}
		}

		.li3 {
			overflow: hidden;
			padding: rem(13);

			li {
				width: (100%/3);
				float: left;
				padding: rem(8);

				a {
					display: block;
					font-size: rem(24);
					height: rem(74);
					line-height: rem(74);
					color: $gray3;
					background-color: #f6f6f6;
					text-align: center;
					border-radius: rem(6);
					overflow: hidden;
					position: relative;

					i {
						display: none;
					}

					&.active {
						background-color: #f0fae5;
						color: #63b900;

						i {
							position: absolute;
							z-index: 9;
							color: $white;
							font-size: rem(10);
							line-height: rem(10);
							right: rem(3);
							bottom: rem(3);
							display: flex;
						}

						&::after {
							content: '';
							position: absolute;
							right: 0;
							bottom: 0;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 0 rem(26) rem(26);
							border-color: transparent transparent #63b900 transparent;
						}
					}
				}
			}

			&.li4 {
				padding-bottom: 0;

				li {
					width: (100%/4);
					padding-bottom: 0;
				}
			}

			&.hide {
				display: none;
			}
		}

		.price {
			height: rem(130);

			input {
				width: rem(140);
				height: rem(68);
				border-radius: rem(34);
				font-size: rem(24);
				background-color: #f6f6f6;
				text-align: center;
			}

			b {
				width: rem(28);
				height: rem(2);
				background-color: $gray9;
				margin: 0 rem(20);
			}
			button {
				width: rem(100);
				height: rem(68);
				border-radius: rem(34);
				font-size: rem(24);
				background-color: #f99f36;
				color: $white;
				text-align: center;
				margin-left: rem(20);
			}
		}
		.item-main{
			&:last-child{
				padding-bottom:rem(120);
			}
		}
	}

	&_button {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;

		p {
			margin-left: rem(220);
			height: rem(120);
			overflow: hidden;
			background-color: $white;

			button {
				width: rem(200);
				float: left;
				font-size: rem(28);
				background-color: $white;
				height: rem(80);
				border-radius: rem(40);
				border: 2px solid #ddd;
				margin: 0 rem(10);

				&:last-child {
					@include background-gradient(#28ad0d,#71bf00,90deg) color: $white;
					border: 2px solid $mainColor;
				}
			}
		}
	}
}

.More {
	padding: rem(30);
	font-size: rem(26);
	color: $gray9;

	i {
		font-size: rem(26);
		display: flex;
		margin-left: rem(10);
	}
}

.product-brands {
	padding: 0 rem(24);
	margin-bottom: rem(20);
	a {
		width: rem(126);
		height: rem(64);
		font-size: rem(24);
		line-height: rem(64);
		margin-top: rem(24);
		text-align: center;
		color: $gray3;
		background-color: #f4f4f4;
		overflow: hidden;

		&.h {
			height: 0;
			margin: 0;
			overflow: hidden;
		}

		&:active {
			color: #63b900;
			background-color: #f0fae5;
		}
	}
}

.product-screen {
	height: rem(40);
	position: relative;
	margin-top: rem(135);

	&-top {
		height: 100%;
		margin: 0 rem(30);

		li {
			a {
				color: $gray3;
				font-size: rem(28);

				b {
					width: rem(28);
					height: rem(40);
					font-weight: 400;

					i {
						font-size: rem(20);
						margin-left: rem(10);
						display: flex;

						&.iconshaixuan {
							font-size: rem(28);
						}
					}
				}
			}
		}
	}

	&-bot {
		background-color: $white;
		padding: rem(24);
		width: 100%;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: rem(35);
		z-index: 99;
		display: none;

		ul {
			overflow: hidden;

			li {
				width: (100%/4);
				float: left;
				padding: rem(8);

				a {
					display: block;
					font-size: rem(24);
					height: rem(74);
					line-height: rem(74);
					color: $gray3;
					background-color: #f6f6f6;
					text-align: center;
					border-radius: rem(6);
					overflow: hidden;
					position: relative;

					i {
						display: none;
					}

					&:active {
						background-color: #f0fae5;
						color: #63b900;
					}
				}
			}
		}

		.price {
			height: rem(130);

			input {
				width: rem(180);
				height: rem(68);
				border-radius: rem(34);
				font-size: rem(24);
				background-color: #f6f6f6;
				text-align: center;
			}

			b {
				width: rem(28);
				height: rem(2);
				background-color: $gray9;
				margin: 0 rem(23);
			}
			button {
				width: rem(120);
				height: rem(68);
				border-radius: rem(34);
				font-size: rem(24);
				background-color: #f99f36;
				color: $white;
				text-align: center;
				margin-left: rem(20);
			}
		}
	}
}
